<template>
  <div class="login-container">
    <div class="login_box">
      <!-- 头像 -->
       <div class="avatar_box">
         <img src="../assets/logo.png" alt="">
       </div>
       <!-- 登陆 按需引入-->
       <div class="input">
         <el-form ref="form" :model="form" :rules='rules' class="login_form">
           <el-form-item  prop=' username'>
             <el-input prefix-icon='iconfont icon-user' v-model="form.username"></el-input>
           </el-form-item>
           <el-form-item prop='password'>
             <el-input type='password' prefix-icon='iconfont icon-3702mima' v-model="form.password"></el-input>
           </el-form-item>
           <el-form-item class="btns">
               <el-button type="primary" round @click="submitForm">登陆</el-button>
                <el-button type="info" round @click="resetForm">重置</el-button>
           </el-form-item>
           
         </el-form>

       </div>


    </div>
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  data(){
    return{
      form:{
          username: 'admin',
          password: '123456',
      },
        rules: {
           username: [
            { required: true, message: '请输入用户名', trigger: 'blur' },
            { min: 3, max: 10, message: '长度在 3 到 10个字符', trigger: 'blur' }
          ],
            password: [
            { required: true, message: '请输入密码', trigger: 'blur' },
            { min: 6, max: 10, message: '长度在 6 到 10 个字符', trigger: 'blur' }
          ],
          }
    }
  },
  methods:{
    submitForm() {
      /* 登陆前的验证 不符合就重新输入再发送验证请求 */
        this.$refs.form.validate((valid) => {
          if (valid) {
            this.$http.post('login',this.form).then(response => {
              //console.log(response)
              let res = response.data
              if(res.meta.status !== 200){
                return  this.$message.error('失败')
                
              }else{
               this.$message.success('成功')
               window.sessionStorage.setItem('token',res.data.token)
               this.$router.push('/home')
              }
            })
           
          } else {
            console.log('error submit!!');
            return ;
          }
        });
      },
     resetForm(x) {
        this.$refs.form.resetFields();
     }
  },
  props: {
    msg: String
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="less">
.login-container{
  position: relative;
  background-color:yellowgreen;
  height: 100%;
}
.login_box{
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%,-50%);
  width: 450px;
  height: 300px;
  background-color: #ffffff;
  border-radius: 10px;
}
.avatar_box{
  position: absolute;
  left: 50%;
  transform: translate(-50%,-50%);
  height: 130px;
  width: 130px;
  border: 1px solid #eee;
  border-radius: 50%;
  padding: 10px;
  box-shadow: 0 0 10px #ddd;
  background-color: #fff;
  img{
    height: 100%;
    width: 100%;
    border-radius: 50%;
  }
}
.login_form{
position: absolute;
bottom: 0;
width: 100%;
padding: 20px;
box-sizing: border-box;
}
.btns{
  display: flex;
  justify-content: flex-end;
}
</style>
